﻿<common:LayoutAwarePage x:Name="pageRoot"
                        x:Class="FantasyWereld.Views.ItemDetailPage"
                        DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
                        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:local="using:FantasyWereld"
                        xmlns:data="using:FantasyWereld.Data"
                        xmlns:common="using:FantasyWereld.Common"
                        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                        mc:Ignorable="d">

    <Page.Resources>
        <common:StringToVisibilityConverter x:Key="StringToVisibilityConverter" />

        <!-- Collection of items displayed by this page -->
        <CollectionViewSource x:Name="itemsViewSource"
                              Source="{Binding Items}"
                              d:Source="{Binding AllGroups[0].Items, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}" />

        <Storyboard x:Name="FadeOpacity"
                    RepeatBehavior="1x">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                           Storyboard.TargetName="BackGroundImage">
                <EasingDoubleKeyFrame KeyTime="0"
                                      Value="1" />
                <EasingDoubleKeyFrame KeyTime="0:0:2"
                                      Value="0.45">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <SineEase EasingMode="EaseInOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

    </Page.Resources>

    <Page.BottomAppBar>
        <AppBar x:Name="PageAppBar"
                Padding="10,0,10,0">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100*" />
                    <ColumnDefinition Width="50*" />
                </Grid.ColumnDefinitions>
                <StackPanel x:Name="LeftCommands"
                            Orientation="Horizontal"
                            Grid.Column="0"
                            HorizontalAlignment="Left">
                    <Button x:Name="PinReviewButton"
                            HorizontalAlignment="Left"
                            Style="{StaticResource PinAppBarButtonStyle}"
                            Click="OnPinReviewButtonClicked" />
                    <Button x:Name="BrowseToReviewButton"
                            HorizontalAlignment="Left"
                            Style="{StaticResource Globe2AppBarButtonStyle}"
                            Click="OnBrowseToReviewButtonClicked" />
                    <Button x:Name="ShopAtBolButton"
                            HorizontalAlignment="Left"
                            Style="{StaticResource ShopAtBolAppBarButtonStyle}"
                            Click="OnShopAtBolButtonClicked" />
                    <Button x:Name="UpdateAuthorButton"
                            HorizontalAlignment="Left"
                            Style="{StaticResource SyncAppBarButtonStyle}"
                            Click="OnUpdateAuthorButtonClicked" />
                </StackPanel>
                <StackPanel x:Name="RightCommands"
                            Orientation="Horizontal"
                            Grid.Column="1"
                            HorizontalAlignment="Right">
                    <Button x:Name="BrowseToSiteButton"
                            HorizontalAlignment="Left"
                            Style="{StaticResource GlobeAppBarButtonStyle}"
                            Click="OnBrowseToSiteButtonClicked" />
                    <Button x:Name="BrowseToForumButton"
                            HorizontalAlignment="Left"
                            Style="{StaticResource CommentAppBarButtonStyle}"
                            Click="OnBrowseToForumButtonClicked" />
                    <Button x:Name="BrowsetoFacebookButton"
                            HorizontalAlignment="Left"
                            Style="{StaticResource ShareAppBarButtonStyle}"
                            Click="OnBrowseToFacebookButtonClicked" />
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}"
          DataContext="{Binding Group}"
          x:Name="rootVisual"
          d:DataContext="{Binding AllGroups[0], Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}">

        <Grid.RowDefinitions>
            <RowDefinition Height="140" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Image x:Name="BackGroundImage"
               Grid.RowSpan="2"
               Source="/Images/achtergrond.png"
               Stretch="UniformToFill" />

        <!--
            The remainder of the page is one large FlipView that displays details for
            one item at a time, allowing the user to flip through all items in the chosen
            group
        -->
        <FlipView x:Name="flipView"
                  AutomationProperties.AutomationId="ItemsFlipView"
                  AutomationProperties.Name="Item Details"
                  SelectionChanged="flipView_SelectionChanged"
                  TabIndex="1"
                  Grid.RowSpan="2"
                  ItemsSource="{Binding Source={StaticResource itemsViewSource}}">

            <FlipView.ItemContainerStyle>
                <Style TargetType="FlipViewItem">
                    <Setter Property="Margin"
                            Value="0,137,0,0" />
                </Style>
            </FlipView.ItemContainerStyle>

            <FlipView.ItemTemplate>
                <DataTemplate>
                    <!--
                        UserControl chosen as the templated item because it supports visual state management
                        Loaded/unloaded events explicitly subscribe to view state updates from the page
                    -->
                    <UserControl Loaded="StartLayoutUpdates"
                                 Unloaded="StopLayoutUpdates">
                        <ScrollViewer x:Name="scrollViewer"
                                      Style="{StaticResource HorizontalScrollViewerStyle}"
                                      Grid.Row="1">

                            <VisualStateManager.VisualStateGroups>

                                <!-- Visual states reflect the application's view state inside the FlipView -->
                                <VisualStateGroup x:Name="ApplicationViewStates">
                                    <VisualState x:Name="FullScreenLandscape" />
                                    <VisualState x:Name="Filled" />

                                    <!-- Respect the narrower 100-pixel margin convention for portrait -->
                                    <VisualState x:Name="FullScreenPortrait">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextColumns"
                                                                           Storyboard.TargetProperty="Margin">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="97,0,87,57" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="image"
                                                                           Storyboard.TargetProperty="MaxHeight">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="400" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

                                    <!-- When snapped, the content is reformatted and scrolls vertically -->
                                    <VisualState x:Name="Snapped">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextColumns"
                                                                           Storyboard.TargetProperty="Margin">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="17,0,17,57" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextColumns2"
                                                                           Storyboard.TargetProperty="Margin">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="17,0,17,57" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="scrollViewer"
                                                                           Storyboard.TargetProperty="Style">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{StaticResource VerticalScrollViewerStyle}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextBlock"
                                                                           Storyboard.TargetProperty="Width">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="280" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderImage"
                                                                           Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Collapsed" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderImage2"
                                                                           Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Visible" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ImageParagraph"
                                                                           Storyboard.TargetProperty="LineHeight">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="225" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Col1"
                                                                           Storyboard.TargetProperty="Width">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="0" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Col2"
                                                                           Storyboard.TargetProperty="Width">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="0" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Col3"
                                                                           Storyboard.TargetProperty="Width">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="0" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Col4"
                                                                           Storyboard.TargetProperty="Width">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="0" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid1"
                                                                           Storyboard.TargetProperty="Margin">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="17 0 0 0" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid2"
                                                                           Storyboard.TargetProperty="Margin">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="17 0 0 0" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="stackPanel1"
                                                                           Storyboard.TargetProperty="Orientation">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Vertical" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="stackPanel2"
                                                                           Storyboard.TargetProperty="Orientation">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Vertical" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <StackPanel Orientation="Horizontal"
                                        x:Name="stackPanel1">
                                <!-- Content is allowed to flow across as many columns as needed -->
                                <common:RichTextColumns x:Name="richTextColumns"
                                                        Margin="117,0,117,47"
                                                        VerticalAlignment="Top">

                                    <!-- Additional columns are created from this template -->
                                    <common:RichTextColumns.ColumnTemplate>
                                        <DataTemplate>
                                            <RichTextBlockOverflow MaxWidth="560"
                                                                   Margin="80,0,0,0">
                                                <RichTextBlockOverflow.RenderTransform>
                                                    <TranslateTransform X="-1"
                                                                        Y="4" />
                                                </RichTextBlockOverflow.RenderTransform>
                                            </RichTextBlockOverflow>
                                        </DataTemplate>
                                    </common:RichTextColumns.ColumnTemplate>
                                    <RichTextBlock x:Name="richTextBlock"
                                                   Width="560"
                                                   Style="{StaticResource ItemRichTextStyle}"
                                                   IsTextSelectionEnabled="False">
                                        <Paragraph Margin="0 0 0 10"
                                                   LineHeight="30">
                                            <Run FontSize="26.667"
                                                 FontWeight="Light"
                                                 Text="{Binding Title}" />
                                        </Paragraph>
                                        <Paragraph Margin="0 0 0 0"
                                                   LineHeight="0"
                                                   x:Name="ImageParagraph">
                                            <InlineUIContainer>
                                                <Border x:Name="BorderImage2"
                                                        Grid.Column="0"
                                                        Grid.RowSpan="7"
                                                        Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"
                                                        Width="150"
                                                        Height="225"
                                                        BorderBrush="Black"
                                                        BorderThickness="1"
                                                        Visibility="Collapsed">
                                                    <Image x:Name="image2"
                                                           Stretch="UniformToFill"
                                                           Source="{Binding Image}" />
                                                </Border>
                                            </InlineUIContainer>
                                        </Paragraph>
                                        <Paragraph LineStackingStrategy="MaxHeight">
                                            <InlineUIContainer>
                                                <Grid>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="20" />
                                                        <ColumnDefinition Width="130"
                                                                          x:Name="Col1" />
                                                        <ColumnDefinition Width="20"
                                                                          x:Name="Col2" />
                                                        <ColumnDefinition Width="100" />
                                                        <ColumnDefinition Width="20" />
                                                        <ColumnDefinition Width="*" />
                                                    </Grid.ColumnDefinitions>
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition Height="*" />
                                                        <RowDefinition Height="*" />
                                                        <RowDefinition Height="*" />
                                                        <RowDefinition Height="*" />
                                                        <RowDefinition Height="*" />
                                                        <RowDefinition Height="*" />
                                                        <RowDefinition Height="*" />
                                                        <RowDefinition Height="*" />
                                                        <RowDefinition Height="*" />
                                                    </Grid.RowDefinitions>
                                                    <Border x:Name="BorderImage"
                                                            Grid.Column="0"
                                                            Grid.ColumnSpan="2"
                                                            Grid.RowSpan="8"
                                                            Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"
                                                            Width="150"
                                                            Height="225"
                                                            BorderBrush="Black"
                                                            BorderThickness="1">
                                                        <Image x:Name="image"
                                                               Stretch="UniformToFill"
                                                               Source="{Binding Image}" />
                                                    </Border>
                                                    <TextBlock Grid.Row="0"
                                                               Grid.Column="3"
                                                               Text="Auteur"
                                                               x:Name="Auteur" />
                                                    <TextBlock Grid.Row="1"
                                                               Grid.Column="3"
                                                               Text="Uitgever" />
                                                    <TextBlock Grid.Row="2"
                                                               Grid.Column="3"
                                                               Text="ISBN" />
                                                    <TextBlock Grid.Row="3"
                                                               Grid.Column="3"
                                                               Text="Uitgave"
                                                               Visibility="{Binding Edition, Converter={StaticResource StringToVisibilityConverter}}" />
                                                    <TextBlock Grid.Row="3"
                                                               Grid.Column="3"
                                                               Text="Titel Origineel"
                                                               Visibility="{Binding TitleOriginal, Converter={StaticResource StringToVisibilityConverter}}" />
                                                    <TextBlock Grid.Row="4"
                                                               Grid.Column="3"
                                                               Text="Verschenen" />
                                                    <TextBlock Grid.Row="5"
                                                               Grid.Column="3"
                                                               Text="Prijs"
                                                               Visibility="{Binding Price, Converter={StaticResource StringToVisibilityConverter}}" />
                                                    <TextBlock Grid.Row="5"
                                                               Grid.Column="3"
                                                               Text="Subgenre"
                                                               Visibility="{Binding SubGenre, Converter={StaticResource StringToVisibilityConverter}}" />
                                                    <TextBlock Grid.Row="6"
                                                               Grid.Column="3"
                                                               Text="Leeftijd"
                                                               Visibility="{Binding Age, Converter={StaticResource StringToVisibilityConverter}}" />
                                                    <TextBlock Grid.Row="7"
                                                               Grid.Column="3"
                                                               Text="Vertaling"
                                                               Visibility="{Binding Translator, Converter={StaticResource StringToVisibilityConverter}}" />
                                                    <TextBlock Grid.Row="0"
                                                               Grid.Column="5"
                                                               Text="{Binding Author}"
                                                               TextWrapping="Wrap" />
                                                    <TextBlock Grid.Row="1"
                                                               Grid.Column="5"
                                                               Text="{Binding Publisher}"
                                                               TextWrapping="Wrap" />
                                                    <TextBlock Grid.Row="2"
                                                               Grid.Column="5"
                                                               Text="{Binding ISBN}"
                                                               TextWrapping="Wrap" />
                                                    <TextBlock Grid.Row="3"
                                                               Grid.Column="5"
                                                               Text="{Binding Edition}"
                                                               TextWrapping="Wrap" />
                                                    <TextBlock Grid.Row="3"
                                                               Grid.Column="5"
                                                               Text="{Binding TitleOriginal}"
                                                               TextWrapping="Wrap" />
                                                    <TextBlock Grid.Row="4"
                                                               Grid.Column="5"
                                                               Text="{Binding PublishDate}"
                                                               TextWrapping="Wrap" />
                                                    <TextBlock Grid.Row="5"
                                                               Grid.Column="5"
                                                               Text="{Binding Price}"
                                                               TextWrapping="Wrap" />
                                                    <TextBlock Grid.Row="5"
                                                               Grid.Column="5"
                                                               Text="{Binding SubGenre}"
                                                               TextWrapping="Wrap" />
                                                    <TextBlock Grid.Row="6"
                                                               Grid.Column="5"
                                                               Text="{Binding Age}"
                                                               TextWrapping="Wrap" />
                                                    <TextBlock Grid.Row="7"
                                                               Grid.Column="5"
                                                               Text="{Binding Translator}"
                                                               TextWrapping="Wrap" />
                                                    <Border Grid.Row="8"
                                                            Grid.Column="0"
                                                            Grid.ColumnSpan="6"
                                                            Background="#FAEBBC" 
                                                            Visibility="{Binding Quote, Converter={StaticResource StringToVisibilityConverter}}" />
                                                    <Border Grid.Row="8"
                                                            Grid.Column="0"
                                                            Background="#FAEBBC"
                                                            Height="Auto"
                                                            Visibility="{Binding Quote, Converter={StaticResource StringToVisibilityConverter}}"
                                                            VerticalAlignment="Top">
                                                        <Image Source="/Assets/OpenQuote.gif" />
                                                    </Border>
                                                    <Border Grid.Row="8"
                                                            Grid.Column="1"
                                                            Grid.ColumnSpan="5"
                                                            Background="#FAEBBC" 
                                                            Visibility="{Binding Quote, Converter={StaticResource StringToVisibilityConverter}}" >
                                                        <TextBlock Text="{Binding Quote}"
                                                                   TextWrapping="WrapWholeWords"
                                                                   Foreground="Black"
                                                                   Padding="10 10 10 10" />
                                                    </Border>
                                                </Grid>
                                            </InlineUIContainer>
                                        </Paragraph>
                                        <Paragraph>
                                            <LineBreak />
                                            <Run FontWeight="SemiLight"
                                                 Text="{Binding Content}" />
                                        </Paragraph>
                                        <Paragraph>
                                            <LineBreak />
                                            <InlineUIContainer>
                                                <TextBlock FontSize="16"
                                                           FontWeight="Bold"
                                                           Text="Eindoordeel:"
                                                           Visibility="{Binding StarsLink, Converter={StaticResource StringToVisibilityConverter}}" />
                                            </InlineUIContainer>
                                            <InlineUIContainer>
                                                <Image x:Name="Stars"
                                                       Height="20"
                                                       Source="{Binding Stars}"
                                                       AutomationProperties.Name="{Binding Stars}" />
                                            </InlineUIContainer>
                                        </Paragraph>
                                        <Paragraph>
                                            <Run FontWeight="SemiLight"
                                                 Text="{Binding Reviewer}" />
                                        </Paragraph>
                                    </RichTextBlock>
                                </common:RichTextColumns>

                                <StackPanel Orientation="Horizontal"
                                            x:Name="stackPanel2">
                                    <!-- Content is allowed to flow across as many columns as needed -->
                                    <common:RichTextColumns x:Name="richTextColumns2"
                                                            Margin="117,0,117,47"
                                                            VerticalAlignment="Top">

                                        <!-- Additional columns are created from this template -->
                                        <common:RichTextColumns.ColumnTemplate>
                                            <DataTemplate>
                                                <RichTextBlockOverflow MaxWidth="320"
                                                                       Margin="80,0,0,0">
                                                    <RichTextBlockOverflow.RenderTransform>
                                                        <TranslateTransform X="-1"
                                                                            Y="4" />
                                                    </RichTextBlockOverflow.RenderTransform>
                                                </RichTextBlockOverflow>
                                            </DataTemplate>
                                        </common:RichTextColumns.ColumnTemplate>
                                        <RichTextBlock Width="320"
                                                       Style="{StaticResource ItemRichTextStyle}"
                                                       IsTextSelectionEnabled="False">
                                            <Paragraph Margin="0 0 0 10"
                                                       LineHeight="30">
                                                <Run FontSize="26.667"
                                                     FontWeight="Light"
                                                     Text="{Binding Author}" />
                                            </Paragraph>
                                            <Paragraph LineStackingStrategy="MaxHeight">
                                                <InlineUIContainer>
                                                    <Grid>
                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition Width="100" />
                                                            <ColumnDefinition Width="20" />
                                                            <ColumnDefinition Width="200" />
                                                        </Grid.ColumnDefinitions>
                                                        <Grid.RowDefinitions>
                                                            <RowDefinition Height="*" />
                                                            <RowDefinition Height="*" />
                                                            <RowDefinition Height="*" />
                                                        </Grid.RowDefinitions>
                                                        <TextBlock Grid.Row="0"
                                                                   Grid.Column="0"
                                                                   Text="Nationaliteit" />
                                                        <TextBlock Grid.Row="0"
                                                                   Grid.Column="2"
                                                                   Text="{Binding AuthorCountry}"
                                                                   TextWrapping="Wrap" />
                                                        <HyperlinkButton NavigateUri="{Binding AuthorWebsiteUri}"
                                                                         Grid.Row="1"
                                                                         Grid.Column="0"
                                                                         Grid.ColumnSpan="3" >
                                                            <StackPanel Orientation="Horizontal">
                                                                <TextBlock FontFamily="Segoe UI Symbol"
                                                                           Text="&#xE12B;"
                                                                           Foreground="White"
                                                                           Margin="-14 0 10 0"
                                                                           Visibility="{Binding AuthorWebsite, Converter={StaticResource StringToVisibilityConverter}}" />
                                                                <TextBlock Text="{Binding AuthorWebsite}"
                                                                           Foreground="White" />
                                                            </StackPanel>
                                                        </HyperlinkButton>

                                                    </Grid>
                                                </InlineUIContainer>
                                            </Paragraph>
                                            <Paragraph>
                                                <LineBreak />
                                                <Run FontWeight="SemiLight"
                                                     Text="{Binding AuthorContent}" />
                                            </Paragraph>
                                        </RichTextBlock>
                                    </common:RichTextColumns>
                                </StackPanel>

                                <Grid x:Name="Grid1">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="40"
                                                          x:Name="Col3" />
                                    </Grid.ColumnDefinitions>

                                    <GridView ItemsSource="{Binding AuthorBooks}"
                                              Grid.Column="0"
                                              SelectionMode="None"
                                              IsSwipeEnabled="false"
                                              IsItemClickEnabled="True"
                                              ItemClick="ItemView_ItemClick" >
                                        <GridView.ItemTemplate>
                                            <DataTemplate>
                                                <Grid HorizontalAlignment="Left"
                                                      Width="150"
                                                      Height="225">
                                                    <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"
                                                            BorderBrush="Black"
                                                            BorderThickness="1">
                                                        <StackPanel>
                                                            <Image Source="{Binding Image}"
                                                                   Stretch="UniformToFill"
                                                                   AutomationProperties.Name="{Binding Title}" />
                                                        </StackPanel>
                                                    </Border>
                                                    <StackPanel VerticalAlignment="Bottom"
                                                                Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                                                        <TextBlock Text="{Binding Title}"
                                                                   Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}"
                                                                   Style="{StaticResource TitleTextStyle}"
                                                                   Height="60"
                                                                   Margin="15,0,15,10" />
                                                    </StackPanel>
                                                    <StackPanel VerticalAlignment="Top"
                                                                HorizontalAlignment="Left">
                                                        <Image Source="/Assets/Boek.png"
                                                               Stretch="None" />
                                                    </StackPanel>
                                                </Grid>
                                            </DataTemplate>
                                        </GridView.ItemTemplate>
                                        <GridView.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <WrapGrid MaximumRowsOrColumns="3" />
                                            </ItemsPanelTemplate>
                                        </GridView.ItemsPanel>
                                    </GridView>
                                </Grid>

                                <Grid x:Name="Grid2">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="40"
                                                          x:Name="Col4" />
                                    </Grid.ColumnDefinitions>

                                    <GridView ItemsSource="{Binding AuthorReviews}"
                                              Grid.Column="0"
                                              SelectionMode="None"
                                              IsSwipeEnabled="false"
                                              IsItemClickEnabled="True"
                                              ItemClick="ItemView_ItemClick" >
                                        <GridView.ItemTemplate>
                                            <DataTemplate>
                                                <Grid HorizontalAlignment="Left"
                                                      Width="150"
                                                      Height="225">
                                                    <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"
                                                            BorderBrush="Black"
                                                            BorderThickness="1">
                                                        <StackPanel>
                                                            <Image Source="{Binding Image}"
                                                                   Stretch="UniformToFill"
                                                                   AutomationProperties.Name="{Binding Title}" />
                                                        </StackPanel>
                                                    </Border>
                                                    <StackPanel VerticalAlignment="Bottom"
                                                                Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                                                        <TextBlock Text="{Binding Title}"
                                                                   Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}"
                                                                   Style="{StaticResource TitleTextStyle}"
                                                                   Height="60"
                                                                   Margin="15,0,15,10" />
                                                    </StackPanel>
                                                    <StackPanel VerticalAlignment="Top"
                                                                HorizontalAlignment="Left">
                                                        <Image Source="/Assets/Recensie.png"
                                                               Stretch="None" />
                                                    </StackPanel>
                                                </Grid>
                                            </DataTemplate>
                                        </GridView.ItemTemplate>
                                        <GridView.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <WrapGrid MaximumRowsOrColumns="3" />
                                            </ItemsPanelTemplate>
                                        </GridView.ItemsPanel>
                                    </GridView>
                                </Grid>
                            </StackPanel>
                        </ScrollViewer>
                    </UserControl>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton"
                    Click="GoBack"
                    IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}"
                    Style="{StaticResource BackButtonStyle}" />
            <TextBlock x:Name="pageTitle"
                       Text="{Binding Title}"
                       Style="{StaticResource PageHeaderTextStyle}"
                       Grid.Column="1"
                       IsHitTestVisible="false" />
            <!-- SearchBox Control that provides suggestions to the user, focus given to control by keybaord by FocusOnKeyboardInput being set to true -->
            <SearchBox x:Name="SearchBox"
                       x:Uid="SearchBox"
                       Grid.Column="1"
                       Height="35"
                       Width="35"
                       HorizontalAlignment="Right"
                       VerticalAlignment="Center"
                       Margin="0 0 20 0"
                       SearchHistoryEnabled="True"
                       PlaceholderText="Doorzoek FantasyWereld" 
                       GotFocus="SearchBox_GotFocus"
                       LostFocus="SearchBox_LostFocus"
                       SuggestionsRequested="SearchBoxEventsSuggestionsRequested"
                       QuerySubmitted="SearchBoxEventsQuerySubmitted"
                       FocusOnKeyboardInput="True" />
        </Grid>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape" />
                <VisualState x:Name="Filled" />

                <!-- The back button respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource PortraitBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource SnappedBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource SnappedPageHeaderTextStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
